<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-动画</title>
</head>
<body>
<div id="message">
    hello
</div>
<div>
    <button id="btnHide">隐藏</button>
    <button id="btnShow">显示</button>
    <button id="btnToggle">切换</button>
</div>
</body>
<script src="../../vendor/jquery.js"></script>
<script>

    /*$('#btnHide').bind('click',function () {
        $('#message').hide(3000,function () {
            alert("我隐藏了啊！")
        });
    })

    $('#btnShow').bind('click',function () {
        $('#message').show(3000);
    })

    $('#btnToggle').bind('click',function () {
        $('#message').toggle(3000);
    })
*/
    /*$('#btnHide').bind('click',function () {
        $('#message').fadeOut(2000);
    })

    $('#btnShow').bind('click',function () {
        $('#message').fadeIn(2000);
    })

    $('#btnToggle').bind('click',function () {
        $('#message').fadeToggle(2000);
    })*/


    $('#btnHide').bind('click',function () {
     $('#message').slideUp(2000);
 })

    $('#btnShow').bind('click',function () {
        $('#message').slideDown(2000);
    })

    $('#btnToggle').bind('click',function () {
        $('#message').slideToggle(2000);
    })
</script>
</html>